<template>
  <!-- Naive UI 配置提供器：设置中文语言和日期本地化 -->
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
    <!-- 加载条提供器：自定义加载条样式 -->
    <n-loading-bar-provider
      :loading-bar-style="{
        loading: 'height:.3em',
        error: 'height:.3em',
      }"
    >
      <!-- 对话框提供器 -->
      <n-dialog-provider>
        <!-- 通知提供器 -->
        <n-notification-provider>
          <!-- 消息提供器 -->
          <n-message-provider>
            <!-- 路由视图：承载页面内容 -->
            <router-view
              style="width: inherit; height: inherit; min-width: inherit; min-height: inherit"
            />
            <!-- Naive UI 提供器内容组件：用于挂载工具方法 -->
            <NaiveProviderContent />
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script setup>
import { defineComponent, h } from 'vue'

// 导入消息和对话框的配置工具函数
import { setupMessage, setupDialog } from '@/utils/message'

/**
 * 应用入口UI组件
 * 负责配置Naive UI的全局提供器和本地化设置
 */

// 导入Naive UI的中文语言包、工具函数和主题
import {
  zhCN,           // 中文语言包
  dateZhCN,       // 中文日期语言包
  useLoadingBar,  // 加载条工具函数
  useDialog,      // 对话框工具函数
  useMessage,     // 消息工具函数
  useNotification, // 通知工具函数
  darkTheme,      // 暗黑主题（当前未使用）
} from 'naive-ui'

/**
 * NaiveProviderContent 组件
 * 功能：在组件挂载时初始化Naive UI工具函数
 * 使用空div渲染，主要目的是执行setup逻辑
 */
const NaiveProviderContent = defineComponent({
  setup() {
    // 调用Naive工具函数初始化
    setupNaiveTools()
  },
  render() {
    // 渲染一个空div，不显示任何内容
    return h('div')
  },
})

/**
 * 挂载naive组件的方法至window对象
 * 以便在Vue组件外（如JS文件、控制台）全局使用
 * @function setupNaiveTools
 */
function setupNaiveTools() {
  // 加载条实例
  window.$loadingBar = useLoadingBar()
  // 通知实例
  window.$notification = useNotification()
  // 消息实例（经过自定义配置）
  window.$message = setupMessage(useMessage())
  // 对话框实例（经过自定义配置）
  window.$dialog = setupDialog(useDialog())
}
</script>